<template>
	<view class="payment_container">
		<view class="top">
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<view class="sys-title"><text class="iconfont icon-shouye6" @click="goHome"></text>确认订单(自助收银)</view>
			</view>
		</view>
		<view class="" style="position: relative; z-index: 10;">
			<view class="bg"></view>
			<view class="store_card">
				<view class="card_hd">
					<text class="iconfont icon-dizhi"></text><text class="">{{ storeInfo.name || '' }}(弗洛花园鲜花)</text>
				</view>
				<view class="store_list">
					<block v-for="(item,index) in list" :key="index">
						<view class="item">
							<view class="imgbox">
								<image :src="item.shopProductInfo.image" mode=""></image>
							</view>
							<view class="right_box">
								<view class="title">
									<text class="name">{{ item.shopProductInfo.store_name }}</text>
									<view class="price">
										<cn-money :money="item.shopProductInfo.shop_price" :size="40" color="#333"></cn-money>
										<!-- <view class="vip_price" v-if="userInfo.vip && userInfo.svip_open_price && userInfo.svip_open && item.shopProductInfo.is_vip == 1">
											<text>￥{{ item.shopProductInfo.vip_price }}</text>
											<image src="/static/images/svip.gif" mode=""></image>
										</view> -->
									</view>
								</view>
								<view class="num">x {{ item.cart_num }}</view>
							</view>
						</view>
						<view class="gift_list" v-if="item.shopProductInfo.gift_products.length > 0">
							<view class="item" v-for="(itemn,indexn) in item.shopProductInfo.gift_products" :key="indexn">
								<view class="imgbox">
									<image :src="itemn.image" mode=""></image>
								</view>
								<view class="right_box">
									<view class="title">
										<text class="name">{{ itemn.store_name }}</text>
										<cn-money :money="0" :size="40" color="#333"></cn-money>
									</view>
									<view class="num">x {{ item.cart_num }}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="box">
				<view class="foot">
					<view class="row">
						<text>商品金额</text>
						<text>￥{{ priceInfo.sumPrice || 0 }}</text>
					</view>
					<view class="row">
						<text>积分抵扣</text>
						<view class="radios">
							<view class="integral">
								<view class="">当前积分<text style="color: #FF3700;">{{ priceInfo.integral || userInfo.integral }}</text></view>
								<view style="color: #999;" v-if="integral_price > 0">本次最多可使用{{ priceInfo.usedIntegral }}积分抵扣
									<text style="color: #FF3700;">{{ integral_price }}元</text>
								</view>
							</view>
							<checkbox-group @change="checkboxChange">
								<checkbox value="111" color="#a9d54f" :checked="useIntegral" />
							</checkbox-group>
						</view>
					</view>
					<view class="row coupon" @click="couponTap">
						<view class="label"><image src="/static/images/store_order_quan.png" mode=""></image>优惠券</view>
						<view class="money" style="color: #F73730;" v-if="coupon.length > 0 && !couponInfo.coupon_price">有可使用优惠券</view>
						<view class="money" style="color: #F73730;" v-if="couponInfo.coupon_price">
							- <cn-money :money="couponInfo.coupon_price" :size="40" color="#F73730"></cn-money>
						</view>
						<view class="money" style="color: #999;" v-if="coupon.length == 0">暂无可用优惠券</view>
					</view>
					<!-- <view class="row">
						<view class="label">会员价优惠</view>
						<view class="money" style="color: #F73730;">
							- ￥<text>{{ priceInfo.vipPrice }}</text>
						</view>
					</view> -->
					<view class="totalPrice">
						小计：<cn-money :money="totalPrice" :size="40" color="#333"></cn-money>
					</view>
				</view>
				<coupons v-if="couponList.couponData" :couponList="couponList" @switchChange="couponChange"></coupons>
				
				<view class="pay_type" @click="openType">
					<text class="title">支付方式</text>
					<view>
						<text class="type">{{ paytypeTxt }}</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<view class="btn" @click="goPay">
				<text>支付￥{{ Number(totalPrice) }}</text>
				<!-- <text style="color: #9ecc40;">放弃优惠</text> -->
				<!-- <text>放弃优惠</text> -->
			</view>
			<!-- <view class="btn">
				<text>支付￥{{ Number(totalPrice) }}</text>
				<text>本单减￥5</text>
			</view> -->
		</view>
		<!-- 优惠券 -->
		<wyb-popup ref="popup1" type="bottom" radius="6" :showCloseIcon="false">
			<view class="coupon_popup popup-content payment">
				<view class="title">选择优惠券<text class="iconfont icon-guanbi" @click='closeCoupon'></text></view>
				<scroll-view :scroll-y="true" class="coupon_list">
					<view class="" v-if="coupon.length">
						<block v-for="(item,index) in coupon" :key="index">
							<view 
								v-if="item.couponType == 0 || item.available"
								class="coupon_item" 
								@click="couponClick(index, item)">
								<!-- :class="curCoupon == index ? 'active_coupon' : ''"  -->
								<view class="item">
									<view class="leftbox">
										<view class="money">{{ item.coupon_price }}元</view>
										<view class="des">{{ item.title }}</view>
									</view>
									<view class="rightbox">
										<view class="">{{ item.number || 1 }}张-{{ item.coupon_title }}</view>
										<view class="des">
											<text>有效期 {{ item.coupon_time == 0 ? item.start_use_time + '~' +item.end_use_time : '立即生效 | '+item.coupon_time + '天'}}</text>
										</view>
									</view>
									<view class="orderCou">
										<view class="iconfont" :class="curCoupon == index ? 'font-color-red icon-xuanzhong11':'icon-weixuan'"></view>
									</view>
								</view>
							</view>
							<view class="coupon_items" v-else>
								<view class="item">
									<view class="leftbox">
										<view class="money">{{ item.coupon_price }}元</view>
										<view class="des">{{ item.title }}</view>
									</view>
									<view class="rightbox">
										<view class="">{{ item.number || 1 }}张-{{ item.coupon_title }}</view>
										<view class="des">
											<text>有效期 {{ item.coupon_time == 0 ? item.start_use_time + '~' +item.end_use_time : '立即生效 | '+item.coupon_time + '天'}}</text>
										</view>
									</view>
									<view class="orderCou">
										<view class="iconfont icon-weixuan"></view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<!-- 无优惠券 -->
					<view class='pictrue' v-else>
						<image src='/static/images/noCoupon.png'></image>
					</view>
				</scroll-view>
			</view>
		</wyb-popup>
		<!-- 选择支付方式 -->
		<wyb-popup ref="popup" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content payment">
		        <view class="title">选择支付方式<text class="iconfont icon-guanbi" @click='close'></text></view>
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in cartArr" :key="index"
					v-if='item.payStatus' @click="payType(item.number || 0 , item.value, index, item.name)">
					<view class="left acea-row row-between-wrapper">
						<view class="iconfont" :class="item.icon"></view>
						<view class="text">
							<view class="name">{{item.name}}</view>
							<view class="info" v-if="item.value == 'yue'">
								{{item.title}} 
								<span class="money">￥{{ item.number || '0.00' }}</span>
								<text class="recharge" @click.stop="recharge">去充值</text>
							</view>
							<view class="info" v-else>{{item.title}}</view>
						</view>
					</view>
					<view class="iconfont" :class="active==index?'icon-xuanzhong11 font-color':'icon-weixuan'"></view>
				</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	import store from '@/store';
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import cnMoney from '@/components/cn-money/cn-money.vue';
	import coupons from '@/components/coupons/coupons.vue';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import couponListWindow from '@/components/couponListWindow/index.vue';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		mapGetters
	} from "vuex";
	import Routine from '@/libs/routine';
	import { saveMoneyCoupons, orderCancel } from '@/api/order.js'
	import { 
		getQrcodeInfo, 
		binduserCart, 
		useCoupons,
		computedPrice,
		orderCreate,
		codeData
	} from '@/api/store.js'
	import {
		toLogin,
		checkLogin
	} from '@/libs/login.js';
	import {
		orderPay
	} from '@/api/order.js';
	export default {
		components: {
		    cnMoney,
			coupons,
			wybPopup,
			// #ifdef MP
			authorize
			// #endif
		},
		
		computed: mapGetters(['isLogin']),
		data() {
			return {
				sysHeight: sysHeight,
				paytype: 'weixin',
				paytypeTxt: '微信支付',
				//属性是否打开
				coupon: [],
				curCoupon: '-1',
				//支付方式
				cartArr: [{
						name: "微信支付",
						icon: "icon-weixin2",
						value: 'weixin',
						title: '使用微信快捷支付',
						payStatus: 1,
					},
					// {
					// 	name: "支付宝支付",
					// 	icon: "icon-zhifubao",
					// 	value: 'alipay',
					// 	title: '使用线上支付宝支付',
					// 	payStatus: 1,
					// },
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						payStatus: 1,
					},
				],
				active: 0,
				couponList: {},
				list: [],
				priceInfo: {},
				storeInfo: {},
				couponInfo: {},
				useIntegral: false,
				userInfo: {},
				integralRatio: 0,
				integral_price: 0,
				orderKey: '',
				totalPrice: 0,
				option: {},
				cartids: '',
				couponId: '',
				codeOption:'',
				usePack: false
			}
		},
		onLoad(opt) {
			// store.commit("LOGOUT");
			if(opt.scene) {
				let option = this.$util.getUrlParams(decodeURIComponent(opt.scene))
				if(option) this.codeOption = option
			}
			console.log(checkLogin(), '检测登录')
		},
		onShow() {
			let that = this;
			if(this.codeOption != '') {
				// #ifdef MP
				// 小程序静默授权
				if (!store.state.app.token && !checkLogin()) {
					store.commit("LOGOUT");
					Routine.getCode().then(code => {
						Routine.silenceAuth(code).then(res => {
							console.log(res, '静默登录结果')
							that.getCodeData(this.codeOption)
						})
					})
					.catch(res => {
						uni.hideLoading();
					});
				} else {
					console.log('已经登录')
					this.getCodeData(this.codeOption)
				}
				// #endif
			}
		},
		onReady() {
			let self = this
			// #ifdef MP
			let info = uni.createSelectorQuery().select(".sys-head");
			info.boundingClientRect(function(data) { //data - 各种参数
				self.mpHeight = data.height
			}).exec()
			// #endif
		},
		methods: {
			getCodeData(option) {
				codeData({
					id: option
				}).then(res => {
					console.log(res, '二维码参数')
					let params = res.data.param.split('&')
					this.storeId = params[1]
					this.cartids = params[0]
					this.option = {
						store_id: params[1],
						carids: params[0]
					}
					this.bindCart(this.option)
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			// 绑定购物车
			bindCart(option){
				binduserCart({
					cartids: option.carids
				}).then(res => {
					console.log(res, '绑定购物车')
					this.getQrcodeInfo(option)
				}).catch(err => {
					console.log(err, '购物车绑定失败')
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			// 获取扫码内容商品信息
			getQrcodeInfo(option) {
				getQrcodeInfo({
					store_id: option.store_id,
					cartId: option.carids
				}).then(res => {
					console.log(res, '获取扫码内容')
					if(res.status == 200) {
						this.list = res.data.cartInfo
						this.priceInfo = res.data.priceGroup
						this.storeInfo = res.data.storeinfo
						this.userInfo = res.data.userInfo
						this.integralRatio = Number(res.data.integralRatio)
						this.orderKey = res.data.orderKey
						this.cartArr[1].number = res.data.userInfo.now_money;
						this.couponList = res.data.couponPack;
						this.totalPrice = res.data.priceGroup.totalPrice
						this.getUseCoupons(option, res.data.priceGroup.totalPrice)
						// this.computedOrderPrice(res.data.orderKey)
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			// 获取可用优惠券
			getUseCoupons(option, price) {
				useCoupons({
					store_id: option.store_id,
					cartId: option.carids
				}, price).then(res => {
					// console.log(res, '可用优惠券')
					res.data.map(el => {
						el.couponType = 0
					})
					this.coupon = res.data;
					if(this.coupon.length > 0) {
						// let index = this.coupon.findIndex(item => item.available)
						this.curCoupon = 0
						this.couponInfo = this.coupon[0]
						this.couponId = this.coupon[0].id
						this.computedOrderPrice(this.orderKey)
					}
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			couponChange(e) {
				this.usePack = e
				if(e) {
					this.couponList.couponOnes.map(el => {
						// Number(el.use_min_price) <= Number(this.totalPrice)
						// if(el.available) {
							this.coupon.push(el)
						// }
					})
				} else {
					this.couponList.couponOnes.map(el => {
						let index = this.coupon.findIndex(item => item.id === el.id)
						if(index != -1) {
							this.coupon.splice(index, 1)
						}
						
					})
					this.curCoupon = '-1'
					this.couponInfo = {}
				}
				this.computedOrderPrice(this.orderKey)
			},
			couponClick(index, item) {
				if(this.curCoupon == index) {
					this.curCoupon = '-1'
					this.couponInfo = {}
				} else {
					this.curCoupon = index
					this.couponInfo = item
				}
				
				this.computedOrderPrice(this.orderKey)
			},
			couponTap: function() {
				this.$refs.popup1.show()
			},
			closeCoupon() {
				this.$refs.popup1.hide()
			},
			// 计算订单价格
			computedOrderPrice(key) {
				computedPrice({
					addressId: 0,
					useIntegral: this.useIntegral ? this.userInfo.integral : 0,
					couponId: this.couponInfo.id ?this.couponInfo.id : '',
					couponPackId: this.usePack ? this.couponList.id : '',
					couponType: this.couponInfo.couponType == 0 ? this.couponInfo.couponType : 1,
					shipping_type: 2,
					payType: this.paytype
				}, key).then(res => {
					console.log(res, '计算后的订单价格信息')
					let result = res.data.result;
					if(result) {
						this.totalPrice = result.pay_price;
						this.integral_price = result.deduction_price;
						
						this.priceInfo.integral = result.SurplusIntegral
						this.priceInfo.usedIntegral = result.usedIntegral
						// this.getUseCoupons(this.option, result.pay_price)
					}
					
				}).catch(err => {
					console.log(err, '计算订单接口错误')
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			// 获取省钱券包
			getSaveMoneyCoupons() {
				saveMoneyCoupons().then(res => {
					// console.log(res)
					this.couponList = res.data[0]
				})
			},
			onLoadFun(option) {
				console.log('回调函数')
				this.getCodeData(option)
				// this.bindCart(this.option)
			},
			checkboxChange(e) {
				this.useIntegral = !this.useIntegral
				this.computedOrderPrice(this.orderKey)
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			openType() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			payType(number, paytype, index, name) {
				this.active = index;
				this.paytype = paytype;
				// this.number = number;
				this.paytypeTxt = name
				this.$refs.popup.hide()
				// this.$emit('changePayType', paytype)
			},
			recharge() {
				uni.navigateTo({
					url: '/pages/users/user_payment/index'
				})
			},
			cancelOrder(id) {
				console.log(id, '------删除订单id')
				orderCancel(id).then(res => {})
			},
			goPay() {
				let that = this;
				if (this.paytype == 'yue' && parseFloat(this.userInfo.now_money) < parseFloat(this.totalPrice))
					return this.$util.Tips({
						title: '余额不足！'
					});
				uni.showLoading({
					title: '订单支付中'
				});
				
				let paytype = this.paytype
				orderCreate({
					key: this.orderKey,
					payType: paytype,
					couponId: this.couponInfo.id ? this.couponInfo.id : '',
					phone: this.userInfo.phone,
					couponPackId: this.usePack ? this.couponList.id : '',
					couponType: this.couponInfo.couponType == 0 ? this.couponInfo.couponType : 1,
					// #ifdef MP
					from: 'routine',
					// #endif
					// #ifdef H5
					from: this.$wechat.isWeixin() ? 'weixin' : 'weixinh5',
					// #endif
					real_name: this.userInfo.real_name,
					store_id: this.storeId,
					useIntegral: this.useIntegral ? this.userInfo.integral : '',
					// #ifdef H5
					quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location
						.port +
						'/pages/users/order_details/index?order_id=' + this.order_id : location.protocol +
						'//' + location.hostname +
						'/pages/users/order_details/index?order_id=' + this.order_id,
					// #endif
					// #ifdef APP-PLUS
					quitUrl: '/pages/users/order_details/index?order_id=' + this.order_id
					// #endif
				}).then(res => {
					console.log(res, '结果')
					if(res.status == 200) {
						let jsConfig = res.data.result.jsConfig;
						let orderId = res.data.result.orderId
						if(that.totalPrice == 0) paytype = 'yue' // 支付金额为0直接走余额支付
						switch (paytype) {
							case 'weixin':
								if (res.data.result === undefined) return that.$util.Tips({
									title: '缺少支付参数'
								});
								
								// #ifdef MP
								uni.requestPayment({
									timeStamp: jsConfig.timestamp,
									nonceStr: jsConfig.nonceStr,
									package: jsConfig.package,
									signType: jsConfig.signType,
									paySign: jsConfig.paySign,
									success: function(resp) {
										uni.hideLoading();
										return that.$util.Tips({
											title: resp.msg,
											icon: 'success'
										}, () => {
											that.onChangeFun('pay_complete', res.data)
										});
									},
									fail: function(e) {
										uni.hideLoading();
										return that.$util.Tips({
											title: '取消支付'
										}, () => {
											that.cancelOrder(orderId)
											that.onChangeFun('pay_fail', res.data)
										});
									},
									complete: function(e) {
										uni.hideLoading();
										if (e.errMsg == 'requestPayment:cancel') return that.$util
											.Tips({
												title: '取消支付'
											}, () => {
												that.cancelOrder(orderId)
												that.onChangeFun('pay_fail', res.data)
											});
									},
								});
								// #endif
								// #ifdef H5
								let data = res.data;
								if (data.status == "WECHAT_H5_PAY") {
									uni.hideLoading();
									location.replace(data.result.jsConfig.mweb_url);
									return that.$util.Tips({
										title: "支付成功",
										icon: 'success'
									}, () => {
										that.onChangeFun('pay_complete', res.data)
									});
								} else {
									that.$wechat.pay(data.result.jsConfig)
										.finally(() => {
											return that.$util.Tips({
												title: "支付成功",
												icon: 'success'
											}, () => {
												that.onChangeFun('pay_complete', res.data)
											});
										})
										.catch(function() {
											return that.$util.Tips({
												title: '支付失败'
											});
										});
								}
								// #endif
								// #ifdef APP-PLUS
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: (e) => {
										let url = '/pages/order_pay_status/index?order_id=' + orderId +
											'&msg=支付成功';
										uni.showToast({
											title: "支付成功"
										})
										setTimeout(res => {
											that.onChangeFun('pay_complete', res.data)
										}, 2000)
									},
									fail: (e) => {
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													that.onChangeFun('pay_fail', res.data)
												} else if (res.cancel) {}
											}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								// #endif
								break;
							case 'yue':
								uni.hideLoading();
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								}, () => {
									that.onChangeFun('pay_complete', res.data)
								});
								break;
							case 'offline':
								uni.hideLoading();
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								}, () => {
									that.onChangeFun('pay_complete', res.data)
								});
								break;
							case 'alipay':
								uni.hideLoading();
								//#ifdef H5
								if (this.$wechat.isWeixin()) {
									uni.redirectTo({
										url: `/pages/users/alipay_invoke/index?id=${res.data.result.order_id}&pay_key=${res.data.result.pay_key}`
									});
								} else {
									uni.hideLoading();
									that.formContent = res.data.result.jsConfig;
									that.$nextTick(() => {
										document.getElementById('alipaysubmit').submit();
									});
								}
								//#endif
								// #ifdef MP
								uni.navigateTo({
									url: `/pages/users/alipay_invoke/index?id=${res.data.result.order_id}&link=${res.data.result.jsConfig.qrCode}`
								});
								// #endif
								// #ifdef APP-PLUS
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig,
									success: (e) => {
										uni.showToast({
											title: "支付成功"
										})
										setTimeout(res => {
											that.onChangeFun('pay_complete', res.data)
										}, 2000)
					
									},
									fail: (e) => {
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													that.onChangeFun('pay_fail', res.data)
												} else if (res.cancel) {}
											}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								// #endif
								break;
						}
					} else {
						that.$util.Tips({
							title: res.msg
						})
					}
				}).catch(err => {
					console.log(err, '返回错误')
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					}, () => {
						that.onChangeFun('pay_fail', res.data)
					});
				})
			},
			onChangeFun(status, data) {
				console.log(data)
				uni.navigateTo({
					url: './pay_success?status=' + status + '&money=' + this.totalPrice + '&orderId=' + data.result.orderId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		position: sticky;
		top: 0;
		width: 100%;
		background-size: 100% auto;
		z-index: 999;
	}
	.sys-head {
		width: 100%;
		background: url("~@/static/images/store_order_topbg.png") no-repeat top;
		background-size: 100% auto;
		.sys-title {
			position: relative;
			z-index: 10;
			height: 43px;
			text-align: left;
			line-height: 43px;
			font-size: 32rpx;
			color: #FFFFFF;
			padding-left: 30rpx;
			.icon-shouye6 {
				background-color: #fff;
				color: #000000;
				border-radius: 50%;
				padding: 10rpx;
				font-size: 32rpx;
				margin-right: 20rpx;
			}
		}
	}
	.bg {
		width: 100%;
		height: 110rpx;
		background: url("~@/static/images/store_order_topbg.png") no-repeat top;
		background-size: 100% auto;
		background-position: left bottom;
	}
	.store_card {
		width: 93%;
		background-color: #fff;
		margin: -100rpx auto 0;
		border-radius: 15rpx;
		padding: 0 40rpx;
		.card_hd {
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;
			font-size: 30rpx;
			border-bottom: 1px solid #eee;
			.icon-dizhi {
				font-size: 36rpx;
				color: #999;
				margin-right: 10rpx;
				margin-top: 8rpx;
			}
		}
		.store_list {
			width: 100%;
			padding: 30rpx 0;
			.gift_list {
				margin-bottom: 20rpx;
			}
			.item {
				display: flex;
				&:not(:last-child) {
					margin-bottom: 20rpx;
				}
				.imgbox {
					width: 160rpx;
					height: 160rpx;
					background-color: #ccc;
					border-radius: 15rpx;
					margin-right: 20rpx;
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 15rpx;
					}
				}
				.right_box {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						width: 100%;
						.name {
							width: 268rpx;
						}
						.price {
							text-align: end;
						}
						.vip_price {
							display: flex;
							align-items: flex-end;
							image {
								width: 80rpx;
								height: 35rpx;
							}
						}
					}
				}
			}
		}
		
	}
	.foot {
		width: 100%;
		border-top: 1px solid #eee;
		padding-bottom: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 25rpx;
		padding: 0 30rpx;
		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			.radios {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				.integral {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					margin-right: 20rpx;
				}
				
			}
		}
		.coupon {
			
			.label {
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
		.totalPrice {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			height: 100rpx;
		}
	}
	.box {
		width: 100%;
		padding: 25rpx;
	}
	.pay_type {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 110rpx;
		background-color: #fff;
		margin-top: 25rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		border-radius: 15rpx;
		box-shadow: 0 0 10rpx 5rpx #eee;
		.title {
			color: #999;
		}
		.type {
			font-weight: 700;
			margin-right: 10rpx;
		}
		.icon-xiangyou {
			color: #999;
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 20rpx 45rpx;
		z-index: 12;
		box-shadow: 0 0 10rpx 5rpx #eee;
		.btn {
			width: 50%;
			padding: 30rpx;
			border-radius: 100rpx;
			font-size: 32rpx;
			font-weight: 700;
			margin: 0 10rpx;
			border: 1px solid #a9d54f;
			text-align: center;
			&:last-child {
				background-image: linear-gradient(to right, #9cc93b, #b6e062);
				color: #fff;
				border-color: #a9d54f;
			}
		}
	}
	.popup-content {
		padding: 0 40rpx 45rpx;
		.title {
			position: relative;
			width: 100%;
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			font-size: 34rpx;
			border-bottom: 1px solid #eee;
		}
		
	}
	.payment .title .iconfont {
		position: absolute;
		right: 0rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 38rpx;
		color: #8a8a8a;
		font-weight: normal;
	}
	.payment.on {
		transform: translate3d(0, 0, 0);
	}
	.payment .item {
		border-bottom: 1rpx solid #eee;
		height: 130rpx;
	}
	
	.payment .item .left {
		width: 610rpx;
	}
	
	.payment .item .left .text {
		width: 540rpx;
	}
	
	.payment .item .left .text .name {
		font-size: 32rpx;
		color: #282828;
	}
	.payment .item .left .text .recharge {
		display: inline-block;
		width: 130rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: #EB3822;
		color: #fff;
		text-align: center;
		margin-left: 30rpx;
	}
	.payment .item .left .text .info {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		color: #999;
	}
	
	.payment .item .left .text .info .money {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont {
		font-size: 45rpx;
		color: #09bb07;
	}
	
	.payment .item .left .iconfont.icon-zhifubao {
		color: #00aaea;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu1 {
		color: #eb6623;
	}
	
	.payment .item .iconfont {
		font-size: 40rpx;
		color: #ccc;
	}
	.coupon_list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 600rpx;
		.pictrue {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}
		
		.pictrue image {
			width: 414rpx;
			height: 336rpx;
		}
	}
	.coupon_item, .coupon_items {
		display: inline-block;
		width: 100%;
		background-color: #fce4c0;
		border-radius: 15rpx;
		padding: 30rpx 40rpx;
		margin-bottom: 25rpx;
		border: 1px solid transparent;
		.item {
			position: relative;
			display: flex;
			align-items: center;
			color: #bd7507;
			border-bottom: 0;
			.leftbox, .rightbox {
				.des {
					font-size: 20rpx;
					margin-top: 8rpx;
				}
			}
			.leftbox {
				border-right: 1px solid #c9cac5;
				padding-right: 30rpx;
				margin-right: 30rpx;
				.money {
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}
	}
	.coupon_items {
		background-color: #eee;
		.item {
			color: #999;
		}
	}
	.active_coupon {
		border: 1px solid #ff5637;
	}
	.orderCou{
		position: absolute;
		right: 0rpx;
		top:50%;
		transform: translate(0, -50%);
	}
	.orderCou .iconfont{
		font-size: 40rpx;
	}
</style>
